<template>
  <div>
    <el-dialog
      :title="$t('LineManagementLang.ServiceFee')"
      :visible.sync="Visible"
      width="900px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div style="display:flex; margin-bottom: 5px;gap:10px">
          <div v-if="typeName!=='details'" style="cursor: pointer;display: flex;align-items: center;gap:5px" @click="add">
            <img style="width:12px;margin-top: 2px;" src="../../assets/img/add.png" alt="">
            <span>{{$t('common.Add')}}</span>
          </div>
        </div>
        <MyTable
        ref="LineManagement_serviceFee"
        :gridOptions="{checkboxConfig:{checkField: 'checked', trigger: 'row', highlight: true,checkMethod:checkSelectable}}"
        :tableColumn="tableColumn"
        :tableData="tableData"
        :isOrder="false"
        @sendTabClick="setTabClick"
        @sendCheckBoxList="setCheckBox"
        >
          <template v-slot:content="scope">
            <span v-if="scope.config.templateType=='Select'">
              <span v-if="scope.row.index === tabClickIndex && tabClickLabel === scope.config.label">
                <el-select
                  v-fo-select
                  @change="selectChange(scope.row,scope.config.prop)"
                  @visible-change="inputType"
                  v-model="scope.row[scope.config.prop]"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>  
              </span>
              <span v-else>{{ scope.row[scope.config.prop+'_name'] }}</span> 
            </span>
            <span v-else>
              <span v-if="scope.row.index === tabClickIndex && tabClickLabel === scope.config.label&&scope.config.templateType!='SwitchBtn'&&typeName!=='details'">
                <el-input-number v-fo v-noFocu v-if="scope.config.templateType=='InputNumber'"
                  v-model="scope.row[scope.config.prop]" controls-position="right" :min="0" :precision="2" @blur="inputBlur(scope.row,scope.config.prop)"></el-input-number>
                <el-input-number v-fo v-noFocu v-else-if="scope.config.templateType=='InputNumber_Sort'"
                  v-model="scope.row[scope.config.prop]" controls-position="right" :min="0" :precision="0" @blur="inputBlur(scope.row,scope.config.prop)"></el-input-number>
                <span v-else>{{ scope.row[scope.config.prop] }}</span>
              </span>
              <span class="btnCLass" v-else-if="scope.config.templateType=='SwitchBtn'">
                <el-switch
                  :disabled="typeName==='details'||scope.row.isMust"
                  v-model="scope.row[scope.config.prop]"
                  active-color="#26BD00"
                  inactive-color="#c0c4cc"
                  :active-value='1'
                  :inactive-value='0'
                  >
                </el-switch>
              </span>       
              <span v-else>{{ scope.row[scope.config.prop] }}</span>
            </span>
          </template>
        </MyTable>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="Previous_step" size="small"
          >{{$t('LineManagementLang.Previous_step')}}</el-button
        >
        <el-button  @click="confirm" size="small">{{$t('common.confirm')}}</el-button>
      </span>
      
    </el-dialog>
    <Add @success="getData" ref="add"></Add>
  </div>
</template>

<script>
import Add from './ServiceFeeManagement_add';
export default {
  components: {
    Add,
  },
  props: {
  },
  data() {
    return {
      Visible: false,
      line_id:'',
      tableColumn:[
        {
          label: "",
          prop: "table_code",
          width: 40,
        },
        {
          type: 'checkbox',
          width: 40,
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.Service_fee_name'),
          prop: "name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.Server_charging_method'),
          prop: "chargeMethod",
          width: 120,
          templateType:'Select',
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.Payment_unit_price'),
          prop: "unitPrice",
          width: 100,
          templateType:'InputNumber',
        },
        {
          checked: true,
          label: this.$t('ServiceFeeManagementLang.Payment_cost'),
          prop: "cost",
          width: 100,
          templateType:'InputNumber',
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.sort'),
          prop: "sort",
          width: 80,
          templateType:'InputNumber_Sort',
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.Is_mandatory'),
          prop: "must",
          width: 80,
          templateType:'SwitchBtn',
        },
      ],
      tableData:[],
      sendDataArr:[],
      options:[],
      tabClickIndex:null,
      tabClickLabel:null,
      my_uid:JSON.parse(sessionStorage.getItem('userData')).uid,
      typeName:'',//判断是否为详情页跳转过来
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
  },
  methods: {
    init(data,name) {
      this.getOptios()
      this.typeName=name
      this.Visible = true;
      this.line_id=data.lid
      this.getData();
    },
    //获取下拉单数据
    getOptios(){
      this.$get("lineSysItems").then((res) => {
        this.options = res.data.survey_type;
      });
    },
    //获取单条
    getData() {
      let created_by=JSON.parse(sessionStorage.getItem('userData')).created_by.length==0?JSON.parse(sessionStorage.getItem('userData')).uid:JSON.parse(sessionStorage.getItem('userData')).created_by
      this.$get("additionalChargeList", { limit: -1,line_id:this.line_id,created_by:created_by}).then((res) => {
        this.tableData = res.data;
        this.tableData.forEach(item=>{
          if(item.line_id!==0){
              this.$refs.LineManagement_serviceFee.$refs.tableRef.setCheckboxRow(item,true);
          }
          item.isMust=item.line_id!==0&&item.line_id!==this.line_id&&item.must==1//继承上级不可修改
        })
        this.sendDataArr=this.tableData.filter(item=>{return item.checked})
      });
    },
    add(){
      this.$refs.add.init()
    },
    setTabClick({index,label}){
      if(this.tableData[index].chargeMethod==6){
        if(label!=this.$t('LineManagementLang.Payment_unit_price')){
          this.tabClickIndex=index
          this.tabClickLabel=label
        }
      }else if(this.tableData[index].chargeMethod!=6){
        if(label!=this.$t('ServiceFeeManagementLang.Payment_cost')){
          this.tabClickIndex=index
          this.tabClickLabel=label
        }
      }
    },
    // 失去焦点初始化
    inputBlur (row,prop) {
      this.tabClickIndex = null
      this.tabClickLabel = null   
    },
    //下拉框选择初始化
    inputType(type) {
      if(!type){
        this.tabClickIndex = null
        this.tabClickLabel = null    
      }
    },
    selectChange(row,prop){
      row[prop+'_name']=this.options.filter(item=>{return item.id==row[prop]}).length>0?this.options.filter(item=>{return item.id==row[prop]})[0].name:''
    },
    // 多选框勾选集合
    setCheckBox(data){
      this.sendDataArr=data
      this.tableData.forEach(item=>{
        if(!item.checked){
          item.must=0
        }
      })
    },
    Previous_step(){
      this.$emit('Previous_step',this.typeName)
      this.cancel()
    },
    // 提交
    confirm() {
      if(this.typeName==='details'){
        this.cancel()
        return
      }
      let type = true;
      let isComplete=true
      let arr=this.tableData.filter(item=>{return !!item.checked})
      arr.forEach(el=>{
        if((el.chargeMethod==6&&!el.cost)||(el.chargeMethod!=6&&!el.unitPrice)||(!el.sort&&el.sort!==0)){
          type=false
          isComplete=false
        }
      })
      if(!isComplete){
        this.$message.warning(this.$t('LineManagementLang.message1'));
      }
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000);
        let params = new FormData();
        params.append("line_id", this.line_id);
        params.append("info", JSON.stringify(arr));
        this.$postForm("lineBindingServiceCharge", params).then((res) => {
          this.confirmTrue = true;
          if(res.success){
            this.$message.success(res.msg);
            this.$emit("success");
            this.cancel()
          }
        });
      }
    },
    //取消修改
    cancel() {
      this.tableData=[]
      this.Visible = false;
      this.tabClickIndex = null
      this.tabClickLabel = null 
    },
    //多选框禁选
    checkSelectable({row}) {
        return !row.isMust
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  /deep/ .is--disabled.vxe-cell--checkbox .vxe-checkbox--icon{
    color:#409eff;
  }
</style>